import * as echarts from 'echarts'
import G6Editor from '@/views/components/zstp/components/G6Editor'
import {
  getKnowledgeGraphAll,
  getKnowledgeGraph
} from '@/api/knowledgeAddition/index.js'
import { GetKnowledgeTypeList } from '@/api/knowledgeTypeAdd'
export default {
  components: {
    G6Editor
  },
  data() {
    return {
      queryParams: {
        chartType: '',
        type: '1',
        skip: '',
        condition: ''
      },
      options: [
        {
          value: '1',
          label: '节点'
        },
        {
          value: '0',
          label: '关系'
        }
      ],
      JumpCountList: [
        {
          value: '1',
          label: '1跳'
        },
        {
          value: '1..2',
          label: '2跳'
        },
        {
          value: '1..3',
          label: '3跳'
        }
      ],
      labelPosition: 'right',
      treedata: [],
      nodeoptions: [],
      defaultProps: {
        value: 'id',
        label: 'typeName',
        children: 'childrenList'
      },
      allNodeData: {},
      isLoading: true
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getKnowledgeGraphAll(this.queryParams)
    this.getKnowledgeGraph()
    this.handleGetNodeType()
  },
  methods: {
    onReset() {
      this.queryParams = {
        chartType: '',
        type: '1',
        skip: '',
        condition: ''
      }
      this.getKnowledgeGraphAll(this.queryParams)
    },
    onSubmit() {
      this.getKnowledgeGraphAll(this.queryParams)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleNodeClick(data) {
      this.queryParams.chartType = data.id
      this.getKnowledgeGraphAll(this.queryParams)
    },
    echartsinit() {
      var chartDom = document.getElementById('chats')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: ''
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: [
              {
                name: 'Node 1',
                x: 400,
                y: 280
              },
              {
                name: 'Node 2',
                x: 320,
                y: 230
              },
              {
                name: 'Node 3',
                x: 370,
                y: 200
              },
              {
                name: 'Node 4',
                x: 500,
                y: 320
              },
              {
                name: 'Node 5',
                x: 580,
                y: 300
              },
              {
                name: 'Node 6',
                x: 620,
                y: 310
              },
              {
                name: 'Node 7',
                x: 590,
                y: 360
              },
              {
                name: 'Node 8',
                x: 450,
                y: 370
              }
            ],
            // links: [],
            links: [
              // 连接方式
              {
                source: 'Node 1',
                target: 'Node 3'
              },
              {
                source: 'Node 1',
                target: 'Node 2'
              },
              {
                source: 'Node 1',
                target: 'Node 4'
              },
              {
                source: 'Node 4',
                target: 'Node 5'
              },
              {
                source: 'Node 4',
                target: 'Node 6'
              },
              {
                source: 'Node 4',
                target: 'Node 7'
              },
              {
                source: 'Node 4',
                target: 'Node 8'
              }
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },

    /** 获取所有节点信息 */
    getKnowledgeGraphAll() {
      // 去除空格
      let str = this.queryParams.condition
      let noSpacesStr = str.replace(/\s+/g, '')
      this.queryParams.condition = noSpacesStr
      getKnowledgeGraphAll(this.queryParams).then(res => {
        if (this.isLoading) {
          // this.treedata = res.data.data.node
          this.isLoading = false
        }
        this.allNodeData = {
          nodes: res.data.data.node.map(item => {
            return {
              ...item,
              label: item.name,
              size: ['80'],
              x: Number(item.x),
              y: Number(item.y)
              // inPoints:[[0,1],[0,-1],[1,0],[-1,0]],
            }
          }),
          edges: res.data.data.relationShip.map(item => {
            return {
              id: item.relationShipId,
              source: item.sourceId,
              sourceId: item.sourceId,
              target: item.targetId,
              targetId: item.targetId,
              // 这个属性，才会让线有文字
              // shape: 'line-arrow',
              shape: 'customEdge',
              type: 'edge',
              // 必须要有这个字段，不然就不显示线上的文字了
              name: item.name ? item.name : '',
              // label的颜色
              labelCfg: {
                autoRotate: true,
                style: {
                  fill: 'red',
                  stroke: 'white',
                  lineWidth: 5
                }
              },
              // 线的颜色
              style: {
                fill: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
                stroke: '#5B8FF9',
                lineWidth: 1
              }
            }
          })
        }
      })
    },

    /** 获取开始/结束节点下拉框 */
    getKnowledgeGraph() {
      getKnowledgeGraph().then(res => {
        this.nodeoptions = res.data.data
      })
    },
    /** 获取节点类型 */
    handleGetNodeType() {
      GetKnowledgeTypeList({}).then(res => {
        console.log(222)
        this.treedata = res.data.data
      })
    }
  }
}
